<link rel="stylesheet" href="../shiro/manager/jquery.mobile-1.3.2.css">
<script type="text/javascript" src="../shiro/manager/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../shiro/manager/jquery.mobile-1.3.2.js"></script>


<div data-role="page"><!--page-->
	<div data-role="header"><!--header-->
		<h1>Navigation</h1>
	</div>
	<div data-role="content"><!--content-->
		Navigation page   
	</div>
	<div data-role="footer"><!--footer-->
		<div data-role="navbar"><!--navbar-->
			<ul>
				<li><a href="#nav1" class="ui-btn-active">One</a></li>
				<li><a href="#nav2">Two</a></li>
			</ul>
		</div>
	</div>
</div>

<div data-role="page" id="nav1"><!--page-->
	<div data-role="header"><!--header-->
		<h1>Nav Screen 1</h1>
	</div>
	<div data-role="content"><!--content-->
		Screen for Navigation One
	</div>
	<div data-role="footer"><!--footer-->
		<h4>Additional Footer information</h4>
	</div>
</div>

<div data-role="page" id="nav2"><!--page-->
	<div data-role="header"><!--header-->
		<h1>Nav Screen 2</h1>
	</div>
	<div data-role="content"><!--content-->
		Screen for Navigation Two
	</div>
	<div data-role="footer"><!--footer-->
		<h4>Additional Footer information</h4>
	</div>
</div>



